<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>停车场管理</title>
	<meta name="decorator" content="default"/>
	<link href="${ctxStatic}/static_back/css/public.css" type="text/css" rel="stylesheet">
	<link href="${ctxStatic}/static_back/css/main.css" type="text/css" rel="stylesheet">
	<script src="https://webapi.amap.com/maps?v=1.4.9&key=f50df840d14861c95415ec7742d42d86"></script>
	<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=f50df840d14861c95415ec7742d42d86&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
</head>

<body>
	<%--标题--%>
	<div class="top-section">
		<input id="btnCancel" class="back-link" type="button" value="&lt;" onclick="history.go(-1)"/>
		<h2><shiro:hasPermission name="air:airParkingLot:edit">${not empty airParkingLot.id?'修改停车场信息':'新增停车场'}</shiro:hasPermission></h2>
	</div>

	<%--表单主体--%>
	<div class="body-section white-body form-body" >
		<form:form id="inputForm" modelAttribute="airParkingLot" action="${ctx}/air/airParkingLot/save" method="post" >
			<form:hidden path="id"/>
			<sys:message content="${message}"/>

			<div class="form-box">
				<div class="input-div">
					<span>名称</span>
					<div>
						<form:input path="name" htmlEscape="false" class=""/>
						<em>*</em>
					</div>
				</div>
				<div class="input-div">
					<span>位置</span>
					<div>
						<form:input path="position" htmlEscape="false" readonly="true" class="" id="point"/>
						<em>*</em>
					</div>
				</div>
				<form:input path="lon" type="hidden" htmlEscape="false" id="lon"/>
				<form:input path="lat" type="hidden" htmlEscape="false" id="lat"/>
				<div class="input-div">
					<span>类型</span>
					<div>
						<form:radiobuttons path="parkingType" items="${fns:getDictList('parking_type')}" itemLabel="label" itemValue="value" check="true"  />
					</div>
				</div>
				<div class="input-div">
					<span>停车位数</span>
					<div>
						<form:input path="maxParking" htmlEscape="false" cssStyle="width: 100px;" /> 个
					</div>
				</div>
				<div class="input-div">
					<span>摄像头IP</span>
					<div>
						<form:input path="camera1" htmlEscape="false" class="" placeholder="第1个摄像头" />
					</div>
				</div>
				<div class="input-div">
					<div>
						<form:input path="camera2" htmlEscape="false" class="" placeholder="第2个摄像头" />
					</div>
				</div>
				<div class="input-div">
					<div>
						<form:input path="camera3" htmlEscape="false" class="" placeholder="第3个摄像头" />
					</div>
				</div>
				<div class="input-div">
					<div>
						<form:input path="camera4" htmlEscape="false" class="" placeholder="第4个摄像头" />
					</div>
				</div>
				<div class="input-div">
					<span>负责人</span>
					<div>
						<form:input path="leader" htmlEscape="false" class="" />
					</div>
				</div>
				<div class="input-div">
					<span>联系电话</span>
					<div>
						<form:input path="phone" htmlEscape="false" class="" />
					</div>
				</div>
			</div>

			<div class="form-bottom">
				<shiro:hasPermission name="air:airParkingLot:edit">
					<input id="btnSubmit" class="btn btn-blue" type="submit" value="保 存"/>
				</shiro:hasPermission>
			</div>
		</form:form>
	</div>

	<%--地图弹窗--%>
	<div id="mapLayer" class="window-layer map-layer">
		<div class="window-bg"></div>
		<div class="window-main">
			<h3>获取地理位置</h3>
			<div class="window-body">
				<div id="mapContainer"></div>
				<input id="mapInput" type="text" placeholder="请输入位置名称"/>
			</div>
			<div class="window-bottom">
				<input type="button" class="btn btn-blue" value="确定" onclick="CloseDiv()"/>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		$(document).ready(function() {
            var parkingType = $('input[name="parkingType"]:checked').val();
            if(!parkingType){
//                console.log($('input[name="parkingType"]').get(0));
                $('input[name="parkingType"]').get(0).checked = true;
			}
            $("#inputForm").validate({
				submitHandler: function(form){
//					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});

			//触发地图选择
			$("#point").bind("click", function () {
				$(".map-layer").css("display", "block");
			});
			var center = [113.58397428, 22.2790923];
			if($("#lon").val()&&$("#lat").val()){
			    center = [$("#lon").val(),$("#lat").val()];
			}
			var map = new AMap.Map('mapContainer', {
				zoom: 10, //初始化地图层级
				center: center //初始化地图中心点
			});
			var maker = new AMap.Marker({
				position: new AMap.LngLat($("#lon").val(), $("#lat").val()),   // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
				title: ''
			});
			map.on('hotspotclick', function(e) {
				console.log(e);
				$("#point").val(e.name);
				maker.setPosition([e.lnglat.getLng(),e.lnglat.getLat()]);
				maker.setTitle(e.name);
				$("#lon").val(e.lnglat.getLng());
				$("#lat").val(e.lnglat.getLat());
			});
			map.add(maker);

			//输入提示
			var autoOptions = {
				input: "mapInput"
			};
			var auto = new AMap.Autocomplete(autoOptions);
			var placeSearch = new AMap.PlaceSearch({
				map: map
			});  //构造地点查询类
			AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发

			function select(e) {
				placeSearch.setCity(e.poi.adcode);
				placeSearch.search(e.poi.name);  //关键字查询查询
			}
		});
		function CloseDiv() {
			$(".map-layer").css("display", "none");
		}
	</script>

</body>
</html>